<template>
	<view class="details-body">
		<view class="details-header">
			<video id="myVideo" autoplay :src="lessonInfo.video_url" :poster="lessonInfo.img"
				class="details-header_img"></video>
			<view class="details-header_text">
				<view>
					<view class="details-header_title">{{lessonInfo.title}}</view>
					<view class="details-header_num">{{lessonInfo.studies}}人已学习</view>
				</view>
				<view class="details-header_text_right">
					<view class="details-header_text_right_btn back" @click="backCourse" v-if="currentIndex!=0">上一节
					</view>
					<view class="details-header_text_right_btn next" @click="nextCourse"
						v-if="currentIndex+1!=params.dataInfo.length">下一节</view>
				</view>
			</view>
		</view>
		<view class="details-msg">
			<view class="details-msg-title text_opblack">课程详情</view>
			<!-- <web-view :src="lessonInfo.content"></web-view> -->
			<view class="details-msg-item">
				<view v-html="lessonInfo.content" class="details-msg-item-content"></view>
				<!-- <view class="details-msg-item-title text_black">授课教师</view>
				<view class="details-msg-item-teacher">
					<image src="../../static/imgs/mine/header.png"></image>
					<view class="text_black">杨辰宇</view>
				</view>
				<view class="details-msg-item-content text_opblack">毕业于北京体育大学，国家一级田径运动员。</view> -->
			</view>
			<!-- <view class="details-msg-item">
				<view class="details-msg-item-title text_black">训练目的</view>
				<view class="details-msg-item-content text_opblack">该练习主要发展小腿力量及踝关节稳定性。</view>
			</view>
			<view class="details-msg-item">
				<view class="details-msg-item-title text_black">训练要点</view>
				<view class="details-msg-item-content text_opblack">建议每组10-18次，进行3-5组。练习过程中，脚后跟升至最高处可停顿1秒左右，膝盖伸直，腰背挺直。</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		getLessonList
	} from "../../static/js/api/course.js";
	export default {
		data() {
			return {
				lessonInfo: {},
				videoContext: null,
				params: {},
				currentIndex: null,
				currentlessonId: null,
			}
		},
		onLoad(option) {
			if (option.params) {
				this.params = JSON.parse(option.params)
				console.log(this.params)
				this.currentlessonId = this.params.lessonId
				this.params.dataInfo.forEach((item, index) => {
					if (item.lesson_id == this.currentlessonId) {
						this.currentIndex = index
					}
				})
				this.getData()
			}

		},
		//页面准备好时创建video
		onReady(res) {
			this.videoContext = uni.createVideoContext('myVideo')
		},

		//离开页面时暂停视频播放
		onHide() {
			this.videoContext.pause();
		},
		methods: {
			getData() {
				this.lessonInfo = {}
				getLessonList({
					lesson_id: this.currentlessonId
				}).then(res => {
					console.log(res)
					this.lessonInfo = res.lesson
					uni.setNavigationBarTitle({
						title: this.lessonInfo.title
					})

				})
			},
			collectClick() {
				this.lessonInfo.course_states = 1
				uni.showToast({
					title: '课程收藏成功',
					icon: "none"
				})
			},
			// 上一个
			backCourse() {
				this.currentIndex--
				this.currentlessonId = this.params.dataInfo[this.currentIndex].lesson_id
				this.getData()
			},
			// 下一个
			nextCourse() {
				this.currentIndex++
				this.currentlessonId = this.params.dataInfo[this.currentIndex].lesson_id
				this.getData()
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import url("./details.scss");

	.text_opblack {
		color: $uni-text-color-opblack;
	}

	.text_black {
		color: $uni-text-color-black;
	}

	.details-msg-item-content {
		::v-deep p {
			line-height: 40rpx;
			margin-bottom: 20rpx;
			font-size: 28rpx;
			color: $uni-text-color-opblack;
		}
		::v-deep b {
			color: $uni-text-color-black;
			font-size: 28rpx;
		}
	}
</style>